Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Tooltip] Add arrow prop #18323

Merged
merged 11 commits into from
Nov 13, 2019
Merged

[Tooltip] Add arrow prop #18323

merged 11 commits into from
Nov 13, 2019

Conversation

goleary
Copy link
Contributor

@goleary goleary commented Nov 11, 2019 •
edited
Loading

Adding a prop to the Tooltip component so that users don't have to copy and paste code from docs to get an arrow (as it's a common case). Originally discussed here:

I made arrowGenerator a util function so that it can be used to create other types of tooltips (like the bootstrap example in the docs).

I also updated the docs to give an example of how to use this.

potential issues:

  • I gave the function input & output no types, as I'm not aware of which ones should be used in this case:export default function arrowGenerator(color: any): any;
  • I have not included a test as I'm not sure how to test that the arrow is displaying properly.

Closes #18243

@mui-pr-bot
Copy link

mui-pr-bot commented Nov 11, 2019 •
edited
Loading

@material-ui/core: parsed: +0.37% , gzip: +0.31%
@material-ui/lab: parsed: +0.75% , gzip: +0.75%

Details of bundle changes.

Comparing: 9eb38da...f8c03f6

bundle Size Change Size Gzip Change Gzip
@material-ui/lab ▲ +1.28 kB (+0.75% ) 171 kB ▲ +386 B (+0.75% ) 51.6 kB
Tooltip ▲ +1.28 kB (+1.31% ) 98.9 kB ▲ +359 B (+1.16% ) 31.3 kB
SpeedDialAction ▲ +1.28 kB (+1.13% ) 115 kB ▲ +343 B (+0.95% ) 36.3 kB
@material-ui/core ▲ +1.28 kB (+0.37% ) 351 kB ▲ +298 B (+0.31% ) 95.9 kB
docs.main ▲ +1.27 kB (+0.21% ) 606 kB ▲ +346 B (+0.18% ) 193 kB
@material-ui/core[umd] ▲ +1.25 kB (+0.41% ) 310 kB ▲ +293 B (+0.33% ) 89.2 kB
@material-ui/styles -- 50.8 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.06 kB
AppBar -- 62.2 kB -- 19.5 kB
Autocomplete -- 126 kB -- 39.8 kB
Avatar -- 61.2 kB -- 19.3 kB
Backdrop -- 66.2 kB -- 20.4 kB
Badge -- 63.8 kB -- 19.7 kB
BottomNavigation -- 60.8 kB -- 19 kB
BottomNavigationAction -- 73.9 kB -- 23.3 kB
Box -- 69.2 kB -- 20.9 kB
Breadcrumbs -- 66.4 kB -- 20.8 kB
Button -- 77.8 kB -- 23.8 kB
ButtonBase -- 72.3 kB -- 22.6 kB
ButtonGroup -- 80.4 kB -- 24.7 kB
Card -- 61.2 kB -- 19.1 kB
CardActionArea -- 73.4 kB -- 23.2 kB
CardActions -- 60.5 kB -- 18.9 kB
CardContent -- 60.4 kB -- 18.9 kB
CardHeader -- 63.5 kB -- 20 kB
CardMedia -- 60.8 kB -- 19.1 kB
Checkbox -- 80.2 kB -- 25.1 kB
Chip -- 80.9 kB -- 24.7 kB
CircularProgress -- 62.5 kB -- 19.7 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
Collapse -- 66.3 kB -- 20.5 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Container -- 61.6 kB -- 19.2 kB
CssBaseline -- 56 kB -- 17.5 kB
Dialog -- 80.9 kB -- 25.1 kB
DialogActions -- 60.5 kB -- 18.9 kB
DialogContent -- 60.6 kB -- 19 kB
DialogContentText -- 62.5 kB -- 19.6 kB
DialogTitle -- 62.7 kB -- 19.7 kB
Divider -- 61 kB -- 19.2 kB
docs.landing -- 55.8 kB -- 14.3 kB
Drawer -- 82.7 kB -- 25.6 kB
ExpansionPanel -- 69.6 kB -- 21.7 kB
ExpansionPanelActions -- 60.5 kB -- 19 kB
ExpansionPanelDetails -- 60.4 kB -- 18.9 kB
ExpansionPanelSummary -- 76.5 kB -- 24.1 kB
Fab -- 75.2 kB -- 23.3 kB
Fade -- 22 kB -- 7.6 kB
FilledInput -- 72 kB -- 22.3 kB
FormControl -- 62.8 kB -- 19.5 kB
FormControlLabel -- 63.9 kB -- 20.1 kB
FormGroup -- 60.4 kB -- 18.9 kB
FormHelperText -- 61.7 kB -- 19.3 kB
FormLabel -- 61.9 kB -- 19.1 kB
Grid -- 63.5 kB -- 19.9 kB
GridList -- 60.9 kB -- 19.1 kB
GridListTile -- 62.2 kB -- 19.5 kB
GridListTileBar -- 61.6 kB -- 19.3 kB
Grow -- 22.6 kB -- 7.72 kB
Hidden -- 64.5 kB -- 20.2 kB
Icon -- 61.2 kB -- 19.2 kB
IconButton -- 74.5 kB -- 23.2 kB
Input -- 70.9 kB -- 22.1 kB
InputAdornment -- 63.5 kB -- 20 kB
InputBase -- 69 kB -- 21.6 kB
InputLabel -- 63.7 kB -- 19.8 kB
LinearProgress -- 63.8 kB -- 19.9 kB
Link -- 65 kB -- 20.6 kB
List -- 60.8 kB -- 18.9 kB
ListItem -- 75.5 kB -- 23.5 kB
ListItemAvatar -- 60.5 kB -- 18.9 kB
ListItemIcon -- 60.6 kB -- 19 kB
ListItemSecondaryAction -- 60.4 kB -- 18.9 kB
ListItemText -- 63.4 kB -- 19.9 kB
ListSubheader -- 61.2 kB -- 19.2 kB
Menu -- 86.6 kB -- 27.2 kB
MenuItem -- 76.5 kB -- 23.8 kB
MenuList -- 64.4 kB -- 20.1 kB
MobileStepper -- 66.2 kB -- 20.6 kB
Modal -- 14.2 kB -- 4.96 kB
NativeSelect -- 75.2 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 72.5 kB -- 22.5 kB
Paper -- 60.7 kB -- 18.9 kB
Popover -- 81 kB -- 25 kB
Popper -- 28.5 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.3 kB
Radio -- 81 kB -- 25.4 kB
RadioGroup -- 61.7 kB -- 19.3 kB
Rating -- 68.4 kB -- 21.9 kB
RootRef -- 4.43 kB -- 1.67 kB
Select -- 112 kB -- 33.4 kB
Skeleton -- 60.9 kB -- 19.1 kB
Slide -- 24.1 kB -- 8.21 kB
Slider -- 74 kB -- 23.3 kB
Snackbar -- 75.6 kB -- 23.5 kB
SnackbarContent -- 64.1 kB -- 20.1 kB
SpeedDial -- 84.4 kB -- 26.6 kB
SpeedDialIcon -- 63 kB -- 19.8 kB
Step -- 61 kB -- 19.1 kB
StepButton -- 80.7 kB -- 25.3 kB
StepConnector -- 61.1 kB -- 19.2 kB
StepContent -- 67.4 kB -- 21 kB
StepIcon -- 63.1 kB -- 19.6 kB
StepLabel -- 67 kB -- 21 kB
Stepper -- 63.2 kB -- 19.9 kB
styles/createMuiTheme -- 15.2 kB -- 5.36 kB
SvgIcon -- 61.5 kB -- 19.1 kB
SwipeableDrawer -- 90.1 kB -- 28 kB
Switch -- 79.5 kB -- 24.7 kB
Tab -- 74.7 kB -- 23.7 kB
Table -- 61 kB -- 19.1 kB
TableBody -- 60.5 kB -- 18.9 kB
TableCell -- 62.5 kB -- 19.6 kB
TableFooter -- 60.5 kB -- 18.9 kB
TableHead -- 60.5 kB -- 18.9 kB
TablePagination -- 139 kB -- 40.5 kB
TableRow -- 61 kB -- 19.1 kB
TableSortLabel -- 75.7 kB -- 23.9 kB
Tabs -- 83.8 kB -- 26.7 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 121 kB -- 35.4 kB
ToggleButton -- 74.5 kB -- 23.5 kB
ToggleButtonGroup -- 61.6 kB -- 19.4 kB
Toolbar -- 60.8 kB -- 19 kB
TreeItem -- 72 kB -- 22.7 kB
TreeView -- 64.8 kB -- 20.3 kB
Typography -- 62.1 kB -- 19.3 kB
useAutocomplete -- 12.1 kB -- 4.47 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.1 kB -- 7.6 kB

Generated by 🚫 dangerJS against f8c03f6

@oliviertassinari oliviertassinari added component: tooltip This is the name of the generic UI component, not the React module! new feature New feature or request labels Nov 12, 2019
@oliviertassinari oliviertassinari changed the title [Tooltip] add arrow prop [Tooltip] Add arrow prop Nov 12, 2019
oliviertassinari
oliviertassinari previously requested changes Nov 12, 2019
View reviewed changes
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great start

packages/material-ui/src/utils/index.js Outdated Show resolved Hide resolved
packages/material-ui/src/Tooltip/Tooltip.js Outdated Show resolved Hide resolved
packages/material-ui/src/Tooltip/Tooltip.js Outdated Show resolved Hide resolved
@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 12, 2019 •
edited
Loading

@goleary I'm not sure that we need a visual test for this feature. If we want to add one, I would recommend that we start an effort to clean up our visual tests, I suspect we have too many, that many aren't useful. The Argos-ci step starts to feel slow. But I doubt it's very important. It has been a long time since they were really useful. At least, since we have stopped heavy UI refactoring (minors).

@oliviertassinari oliviertassinari merged commit 45779b9 into mui:master Nov 13, 2019
@oliviertassinari
Copy link
Member

@goleary Thank you!

@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 15, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 25, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees
No one assigned
Labels
component: tooltip This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Tooltip] make arrow a prop (boolean)
3 participants
@goleary @mui-pr-bot @oliviertassinari